<template>
  <div class="cont">
    <van-tabs v-model="active" color="#FF9700" @change="handleTab">
      <van-tab title="实习"></van-tab>
      <van-tab title="兼职"></van-tab>
    </van-tabs>
    <van-grid :border="false" :column-num="4">
      <van-grid-item
        text="市场推广"
        v-for="item in catelist"
        :key="item._id"
        v-show="item.catetype == active + 1"
        @click="handleCate(item._id)"
      >
        <van-image :src="require('@/' + item.icon)" width="50" height="50" />
        <span class="m-t-15">{{ item.name }}</span>
      </van-grid-item>
    </van-grid>
    <van-empty description="暂无相关岗位" v-if="!joblist.length"></van-empty>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <job-item
        v-for="(item, index) in joblist"
        :key="index"
        :job-data="item"
      ></job-item>
    </van-list>
    
  </div>
</template>

<script>
import request from "@/utils/request";
import { jobGet } from "../api/job.js";
export default {
  data() {
    return {
      active: 0,
      catelist: [],
      joblist: [], //岗位列表
      loading: false,
      finished: false,
      page:1
    };
  },
  created() {
    //加载分类
    request.get("/catelog").then((res) => {
      console.log(res);
      this.catelist = res.data.data;
    });

    
  },
  methods: {
    handleTab(idx) { //菜单切换
      // this.joblist=[]
      // this.finished = false
      this.page = 1
      jobGet({cfytype:idx+1,_page:this.page}).then((res) => {
        console.log(res);
        this.joblist = res.data;
        this.finished = false
      });
    },
    handleCate(cfyid){ //分类宫格
      console.log(cfyid);
      jobGet({cfyid}).then((res) => {
        console.log(res);
        this.joblist = res.data;
      });
    },
    onLoad(){ //初始化、触底的时候会触发
      console.log('onLoad执行了');
      // 加载实习岗位
      jobGet({cfytype:1,_page:this.page}).then((res) => {
        console.log(res);
        if(res.data.length){
          this.joblist = [
            ...this.joblist, //原数据
            ...res.data  //新数据
          ];
          this.page++
        }else{
          this.finished = true  //分页加载动作结束
        }
        this.loading = false
      });
    }
  },
};
</script>

<style lang="less" scoped>
.cont{
  padding-bottom: 6rem;
}
</style>
